<template>
  <div class="web-container">
    <div class="leftTree">
      <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
          <el-tab-pane label="备件" name="first">
            <el-input placeholder="请输入名称" class="searchBox" clearable></el-input>
            <el-tree :data="partiesData" :props="defaultProps" @node-click="handleNodeClick" :highlight-current="true"
              node-key="id" ref="tree">
              <span class="custom-tree-node" slot-scope=" { node, data }">
                <span style="font-size: 14px;">{{ data.label }}</span>
              </span>
            </el-tree>
          </el-tab-pane>
          <el-tab-pane label="物料" name="second">
            <el-input placeholder="请输入名称" class="searchBox" clearable></el-input>
            <el-tree :data="partiesData" :props="defaultProps" @node-click="handleNodeClick" :highlight-current="true"
              node-key="id" ref="tree">
              <span class="custom-tree-node" slot-scope=" { node, data }">
                <span style="font-size: 14px;">{{ data.label }}</span>
              </span>
            </el-tree>
          </el-tab-pane>
          <el-tab-pane label="油料" name="third">
            <el-input placeholder="请输入名称" class="searchBox" clearable></el-input>
            <el-tree :data="partiesData" :props="defaultProps" @node-click="handleNodeClick" :highlight-current="true"
              node-key="id" ref="tree">
              <span class="custom-tree-node" slot-scope=" { node, data }">
                <span style="font-size: 14px;">{{ data.label }}</span>
              </span>
            </el-tree>
          </el-tab-pane>
        </el-tabs>

    </div>
    <div class="rightBox">
      <div style="height: 100%;">
        <div style="position: relative;width: 100%;display: flex;align-items: center;">
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="入库时间">
              <el-date-picker v-model="dateRange" type="daterange" align="right" value-format="yyyy-MM-dd" unlink-panels
                range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="库存归属">
              <el-select v-model="queryParams.approvalType" placeholder="请选择库存归属" clearable>
                <el-option key="0" label="华福油" value="0" />
                <el-option key="1" label="华福油3" value="1" />
                <el-option key="2" label="华福油5" value="1" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="init()">查询</el-button>
              <el-button type="primary" icon="el-icon-refresh" @click="clear()">重置</el-button>
              <el-button type="primary" icon="el-icon-document" >台账</el-button>
            </el-form-item>
          </el-form>

        </div>
        <div class="payTableBox">
          <el-table :data="tableData" stripe style="width: 100%;" border :cell-style="rowStyle" height="100%"
            v-loading="payLoading">
            <el-table-column prop="title" label="入库单号" align="center" fixed="left" width="150">
            </el-table-column>
            <el-table-column prop="type" label="入库类型" align="center" width="80">
              <template slot-scope="scope">
                <el-tag>物料</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="入库名称" align="center" width="80">
            </el-table-column>
            <el-table-column prop="sku" label="入库规格" align="center">
            </el-table-column>
            <el-table-column prop="skuNumber" label="入库数量" align="center">
            </el-table-column>
            <el-table-column prop="skuDw" label="计量单位" align="center">
            </el-table-column>
            <el-table-column prop="price" label="入库单价" align="center">
            </el-table-column>
            <el-table-column prop="address" label="入库地点" align="center">
            </el-table-column>
            <el-table-column prop="dict" label="所属部门" align="center" width="80">
            </el-table-column>
            <el-table-column prop="status" label="入库溯源" align="center" width="110">
              <template slot-scope="scope">
                <el-button type="primary" plain size='mini'>查看</el-button>
              </template>
            </el-table-column>
            <el-table-column prop="status" label="经办人" align="center" width="110">
              <template slot-scope="scope">
                李四
              </template>
            </el-table-column>
            <el-table-column prop="status" label="入库时间" align="center" width="180">
              <template slot-scope="scope">
                2024-02-18 18:05:54
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="100" fixed="right">
              <template slot-scope="scope">
                <el-button type="text" size="small">修正</el-button>
                <el-button type="text" size="small" style="color: #ff4949;" @click="delData(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="bottomPage">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="queryParams.pageNum" :page-sizes="[10, 20, 50, 100]" :page-size="queryParams.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </div>
      </div>
      <payTableBox @tabBack='tabBack' v-if="!showList" :partiesId="orgId" :id="chooseId"></payTableBox>
      <!-- 新增党费交纳核定表 -->
      <el-dialog :title="title" :visible.sync="dialogPay" width="800px">
        <el-form :model="payForm" :rules="rules" ref="payForm" label-width="100px" class="demo-payForm"
          style="justify-content: space-between;display: flex;flex-wrap: wrap;width: 100%;">
          <el-form-item label="支部名称" prop="partyOrgName" class="itemWidth">
            <el-input v-model="payForm.orgName" disabled></el-input>
          </el-form-item>
          <el-form-item label="党员人数" prop="orgNum" class="itemWidth">
            <el-input v-model="payForm.orgNum" type="number"></el-input>
          </el-form-item>
          <el-form-item label="核定标题" prop="title" class="itemWidth">
            <el-input v-model="payForm.title"></el-input>
          </el-form-item>
          <el-form-item label="交纳月份" class="itemWidth">
            <el-date-picker v-model="dateValue" type="monthrange" align="right" value-format="yyyy-MM" unlink-panels
              range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份" style="width: 100%;"
              :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="核定类型" prop="approvalType" class="itemWidth">
            <el-radio-group v-model="payForm.approvalType" @input="changeRadio">
              <el-radio label="0" class="bigRadio" border>正常</el-radio>
              <el-radio label="1" class="bigRadio" border>差额</el-radio>
            </el-radio-group>
          </el-form-item>
          <div class="ceTip" v-if="payForm.approvalType == '1'">
            注意事项：差额核定为正常核定的修正补充，即差额补足或差额划拨。生成差额核定后，系统将对差额核定内党员的历史核定记录做出差额判断（按已交费为准）。在差额核定所设置时间范围内，
            多交部分党费划拨为该党员自愿多交党费，少交部分生成对应月份差额补交单。此外，差额核定和正常核定效力不同，差额核定中每月金额不作为党员每月应交党费使用，只用于差额判断。
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel()">取 消</el-button>
          <el-button type="primary" @click="submitForm()">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="交纳核定表审核流程信息" :visible.sync="dialog" width="80vw">
        <el-table :data="processList" stripe style="width: 100%;" :cell-style="rowStyle" height="100%" key="table1">
          <el-table-column prop="procedure" label="环节名称" align="center" width="100">
            <template slot-scope="scope">
              <span>审核</span>
            </template>
          </el-table-column>
          <el-table-column prop="reviewOrgName" label="审核组织" align="center">
          </el-table-column>
          <el-table-column prop="reviewContent" label="审核意见" align="center" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span type="success" v-if='scope.row.status == 1'>党费交纳核定表通过</span>
              <span type="success" v-if='scope.row.status == 2'>{{scope.row.reviewContent}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="adviceType" label="核定表审核状态" align="center" width="150">
            <template slot-scope="scope">
              <el-tag type="success" v-if='scope.row.status == 1'>已通过</el-tag>
              <el-tag type="warning" v-if='scope.row.status == 2'>已退回</el-tag>
              <el-tag type="info" v-if='scope.row.status == 0'>待审核</el-tag>
            </template>
          </el-table-column>

          <el-table-column prop="adviceType" label="当前状态" align="center" width="100">
            <template slot-scope="scope">
              <el-tag type="info" v-if='scope.row.isReview == 0'>待审核</el-tag>
              <el-tag type="success" v-if='scope.row.isReview == 1'>已审核</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>

    </div>
  </div>
</template>

<script>
  export default {

    data() {
      return {
        // 列信息
        columns: [

        ],
        deptName: undefined,
        partiesData: [{
          label: '一级 1',
          children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1'
            }]
          }]
        }, {
          label: '一级 2',
          children: [{
            label: '二级 2-1',
            children: [{
              label: '三级 2-1-1'
            }]
          }, {
            label: '二级 2-2',
            children: [{
              label: '三级 2-2-1'
            }]
          }]
        }, {
          label: '一级 3',
          children: [{
            label: '二级 3-1',
            children: [{
              label: '三级 3-1-1'
            }]
          }, {
            label: '二级 3-2',
            children: [{
              label: '三级 3-2-1'
            }]
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        state: '',
        timeout: null,
        queryParams: {
          orgName: undefined,
        },
        orgTreeloading: false,
        processList: [], //流程列表
        dialog: false, //流程弹窗控制
        dialogPay: false, //新增弹窗控制
        payLoading: false,
        showList: true,
        currentPage: 1,
        pageOrgId: '', //当前党组织id
        orgId: '', //党组织id
        orgNum: '', //党组织人数
        orgName: '', //党组织名称
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          orgId: null,
          month: null,
          approvalType: null,
          orderByColumn: 'createTime',
          isAsc: 'desc',
        },
        payForm: {
          startTime: null,
          endTime: null,
          approvalType: '0'
        },
        chooseId: null, //当前核定id
        rules: {
          title: [{
            required: true,
            message: '请输入核定标题',
            trigger: 'change'
          }],
          orgNum: [{
            required: true,
            message: '请输入党员人数',
            trigger: 'change'
          }],
          startTime: [{
            required: true,
            message: '请选择交纳月份',
            trigger: 'change'
          }],
        },
        activeName:'first',
        total: 0,
        tableData: [{
            title: 'kc202505180001',
            name: '重油',
            sku: '120cst',
            skuNumber: '153',
            skuDw: '吨',
            price: '4000',
            address: '甲板仓库',
            dict: '机务部'
          },
          {
            title: 'kc202505180001',
            name: '重油',
            sku: '120cst',
            skuNumber: '153',
            skuDw: '吨',
            price: '4000',
            address: '甲板仓库',
            dict: '机务部'
          },
          {
            title: 'kc202505180001',
            name: '重油',
            sku: '120cst',
            skuNumber: '153',
            skuDw: '吨',
            price: '4000',
            address: '甲板仓库',
            dict: '机务部'
          },
          {
            title: 'kc202505180001',
            name: '重油',
            sku: '120cst',
            skuNumber: '153',
            skuDw: '吨',
            price: '4000',
            address: '甲板仓库',
            dict: '机务部'
          },
          {
            title: 'kc202505180001',
            name: '重油',
            sku: '120cst',
            skuNumber: '153',
            skuDw: '吨',
            price: '4000',
            address: '甲板仓库',
            dict: '机务部'
          },
          {
            title: 'kc202505180001',
            name: '重油',
            sku: '120cst',
            skuNumber: '153',
            skuDw: '吨',
            price: '4000',
            address: '甲板仓库',
            dict: '机务部'
          },
          {
            title: 'kc202505180001',
            name: '重油',
            sku: '120cst',
            skuNumber: '153',
            skuDw: '吨',
            price: '4000',
            address: '甲板仓库',
            dict: '机务部'
          }
        ],

        dateValue: [],
        dateRange: '',
        title: '',
        pickerOptions: {
          // disabledDate: (time) => {
          //   if (this.payForm.approvalType == '1') {
          //     return time.getTime() > Date.now() - 8.64e7;
          //   }
          //   return false
          // },
        },
      }
    },
    created() {
      // this.pageOrgId = this.$store.state.user.orgId;
      // this.orgId = this.$store.state.user.orgId;
      // this.orgName = this.$store.state.user.orgName;
      // this.payForm.orgName = this.$store.state.user.orgName;
      // this.payForm.orgId = this.$store.state.user.orgId;
      // this.queryParams.orgId = this.$store.state.user.orgId;
      // this.init()
      // this.getMemList()
    },
    methods: {
      //切换类型
      changeRadio() {
        this.dateValue = [];
        this.payForm.startTime = null;
        this.payForm.endTime = null;
      },
      init() {
        this.payLoading = true;
        this.payLoading = false;
      },
      clear() {
        this.dateRange = '';
        this.queryParams.approvalType = null;
        this.init()
      },
      //查看拒绝原因
      viewContent(info) {
        this.$alert(info, '退回原因', {
          confirmButtonText: '确定',
          callback: action => {

          }
        });
      },
      // 取消按钮
      cancel() {
        this.dialogPay = false;
        this.dateValue = [];
        this.reset();
      },
      // 表单重置
      reset() {
        this.payForm = {
          orgId: this.orgId,
          sorgId: this.pageOrgId,
          orgName: this.orgName,
          approvalType: '0',
          payAmt: null,
          orgNum: null,
          fileUrl: null,
          startTime: null,
          endTime: null,
          title: null,
        };
        this.resetForm("payForm");
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.dateValue = [];
        this.dialogPay = true;
        this.title = "新增党费交纳核定";
      },
      //查看党费审核流程列表
      viewProcess(item) {
        var queryParams = {
          partyDuesPaymentApprovalId: item.id
        }
        listPath(queryParams).then(response => {
          this.processList = response.data;
          this.dialog = true
        });
      },
      //点击树结构党组织
      handleNodeClick(data) {
        this.$emit('partiesBack', data)
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        this.payForm = JSON.parse(JSON.stringify(row));
        this.dateValue = [];
        this.dateValue.push(this.payForm.startTime);
        this.dateValue.push(this.payForm.endTime);
        this.dialogPay = true;
        this.title = "修改党费交纳核定";
      },
      /** 提交按钮 */
      submitForm: function() {
        if (!this.dateValue[0]) {
          this.$message({
            message: '请选择交纳月份',
            type: 'warning'
          });
          return
        }
        this.payForm.startTime = this.dateValue[0]
        this.payForm.endTime = this.dateValue[1]
        this.$refs["payForm"].validate(valid => {
          if (valid) {
            if (this.payForm.id) {
              updPay(this.payForm).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.dialogPay = false;
                this.init()
              });
            } else {
              addPay(this.payForm).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.dialogPay = false;
                this.init()
              });
            }
          }
        });
      },

      /** 删除按钮操作 */
      delData(row) {

        this.$modal.confirm('是否确认删除单号为"' + row.title + '"的库存信息？').then(function() {

        }).then(() => {

          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
      },

      /** 撤回按钮操作 */
      del(row) {
        const id = row.id || this.ids;
        this.$modal.confirm('是否确认撤回标题为"' + row.title + '"的党费交纳核定？').then(function() {
          return cancelPay(id);
        }).then(() => {
          this.init();
          this.$modal.msgSuccess("撤回成功");
        }).catch(() => {});
      },
      /** 上传按钮操作 */
      confirmPay(row) {
        const id = row.id || this.ids;

        this.$confirm('是否确认上传标题为"' + row.title + '"的党费交纳核定？', '系统提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if (!row.payAmt || row.payAmt == 0) {
            this.$message({
              message: '请上传党费交纳核定表或检查是否点击确认上传核定表数据',
              type: 'warning'
            });
            return
          }
          surePay(id).then(response => {
            this.$modal.msgSuccess("上传成功");
            this.queryParams.pageNum = 1;
            this.init()
          });
        }).catch(() => {

        });

      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('partyBasic/memberpayOrPunish/export', {
          ...this.queryParams
        }, `type_${new Date().getTime()}.xlsx`)
      },
      /** 查看核定表*/
      showTable(id) {
        this.chooseId = id;
        // this.showList = false;
        this.$router.replace({
          path: '/partyDues/tableData',
          query: {
            partiesId: this.orgId,
            id: id,
            jumpType: 0
          }
        })
      },
      //获取党员列表
      getMemList() {
        var queryParams = {
          pageSize: 99,
          pageNum: 1,
          orgId: this.orgId
        }
        memBerList(queryParams).then(response => {
          this.orgNum = response.rows.length

        });
      },


      //改变每页条数
      handleSizeChange(val) {
        this.queryParams.pageSize = val
        this.init()
      },
      //改变页数
      handleCurrentChange(val) {
        this.queryParams.pageNum = val;
        this.init()
      },


      //点击返回列表回调
      tabBack() {
        this.showList = true
        this.init()
      },

      //点击党组织回调
      partiesBack(e) {
        this.orgId = e.id;
        this.queryParams.orgId = this.orgId;
        this.queryParams.pageNum = 1;
        this.init();
      },
      //党组织人数回调
      partiesNumBack(e) {
        // this.orgNum = e;
        // this.payForm.orgNum = e;
      },

      //表格数据选择
      handleSelectionChange(val) {
        console.log(val)
      },
      rowStyle() {
        return "text-align:center";
      },

    }
  };
</script>
<style lang='scss' scoped>
  .payTableBox {
    overflow-y: auto;
    height: calc(100% - 115px);
  }

  .bottomPage {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
  }

  .web-container {
    margin-top: 15px;
    height: calc(100vh - 116px);
    width: 100%;
    padding: 0 15px;
    display: flex;
    align-items: center;

    .acNone {}

    .leftTree {
      background: #fff;
      overflow: hidden;
      width: 300px;
      height: 100%;
      border-radius: 5px;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    }

    .rightBox {
      overflow-y: auto;
      background: #fff;
      width: calc(100% - 315px);
      margin-left: 15px;
      height: 100%;
      border-radius: 5px;
      padding: 15px 10px;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
      position: relative;
    }
  }

  .selectWidth {
    width: 100%;
  }

  .itemWidth {
    width: 48%;
    display: flex;
    align-items: center;

    .acNone {}

    ::v-deep .el-form-item__label {
      width: 100px;
      line-height: normal;
    }

    ::v-deep .el-form-item__content {
      margin-left: 10px !important;
      width: calc(100% - 110px) !important;
    }
  }

  .searchBox {
    padding: 15px 10px 10px;
    width: 100%;
  }

  .el-tree-node__content {
    height: 40px;
  }

  .el-tree-node__label {
    word-wrap: break-word;
  }

  .el-tree-node {
    white-space: break-spaces;
    padding-right: 5px;
    margin-top: 5px;
  }

  .btnRightBox {
    position: absolute;
    right: 0;
  }

  .ceTip {
    padding-left: 110px;
    font-size: 13px;
    color: #ff0000;
  }
</style>
